<template>
  <div class="baseinfo">
    <div id="itxst">
      <div :data-id="index" :key="index" v-for="(i, index) in list" class="itxstDiv">
        <p class="left" v-if="taskType != 'view'">
          <!-- <el-icon :size="20" @click="add" color="#0044a0" v-if="index == 0" title="新增">
            <CirclePlusFilled />
          </el-icon> -->
          <el-button  type="success" v-if="index == 0" :icon="Plus" @click="add()" circle  title="新增"/>
          <!-- <el-icon :size="20" color="#0044a0" @click="copy" title="复制">
            <CopyDocument />
          </el-icon> -->
          <el-button style="margin-left: 0px;" type="primary" :icon="CopyDocument" @click="copy(i)" circle  title="复制"/>
          <!-- <el-icon :size="20" color="#0044a0" @click="del(index)" title="删除">
            <Delete />
          </el-icon> -->
          <el-button style="margin-left: 0px;" type="danger" :icon="Delete" @click="del(index)" circle  title="删除"/>
        </p>
        <p class="right" style="width: 100%">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="*任务名称"
                :class="i.isTimes == 'manyTimes' ? 'no-drag' : 'no-drag noMarginBottom'"
              >
                <span v-if="taskType == 'view'">{{ i.taskName }}</span>
                <el-input v-else v-model="i.taskName" placeholder=" 请输入任务名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="*班次内下发"
                :class="i.isTimes == 'manyTimes' ? 'no-drag' : 'no-drag noMarginBottom'"
              >
                <span v-if="taskType == 'view'">
                  {{ i.isTimes == "manyTimes" ? "多次" : "一次" }}
                </span>
                <el-radio-group v-else v-model="i.isTimes" style="margin-top: -5px">
                  <el-radio value="manyTimes" size="large">多次</el-radio>
                  <el-radio value="once" size="large">一次</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="*下发频次" v-if="i.isTimes == 'manyTimes'" class="noMarginBottom">
            每 &nbsp;&nbsp;&nbsp;
            <span v-if="taskType == 'view'">{{ i.timer }}</span>
            <el-input-number
              v-else
              v-model="i.timer"
              class="mx-4"
              :min="1"
              :max="12"
              controls-position="right"
            />
            &nbsp;&nbsp;&nbsp;&nbsp;小时执行1次
          </el-form-item>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, useAttrs, onMounted, getCurrentInstance, nextTick } from "vue";
import { removeTemplateDetail } from "@/api/technology/taskTemplate";
import Sortable from "sortablejs";
import {
  Plus,
  Delete,
  CopyDocument,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const attrs = useAttrs();
const taskType = ref();
const sortableSort = ref([]);
const list = ref([
  {
    timer: 1,
    taskName: "",
    isTimes: "manyTimes",
    taskNum: "",
    content: "",
  },
]);
const newFormTable = ref([]);
function submitForm() {
  console.log(111);
}
function add() {
  list.value.push({
    timer: 1,
    taskName: "",
    isTimes: "manyTimes",
    taskNum: "",
    content: "",
  });
}
function copy() {
  list.value.push({
    timer: 1,
    taskName: "",
    isTimes: "manyTimes",
    taskNum: "",
    content: "",
  });
}
function del(index) {
  if (list.value.length == 1) {
    proxy.$modal.msgError("最少保留一项");
  }
  if (list.value[index].id) {
    removeTemplateDetail(list.value[index].id).then(() => {
      list.value.splice(index, 1);
      proxy.$modal.msgSuccess("移除成功");
    });
  } else {
    list.value.splice(index, 1);
  }
}

onMounted(() => {
  //获取对象
  const el = document.getElementById("itxst");
  //设置配置
  // const ops = ;
  //初始化
  var sortable = Sortable.create(el, {
    animation: 500,
    filter: ".no-drag",
    //拖动结束
    onEnd: function (evt) {
      newFormTable.value = JSON.parse(JSON.stringify(list.value));
      // 通过index更改数据，获取拖拽排序之后的数据
      const changeData = newFormTable.value.splice(evt.oldIndex || 0, 1);
      newFormTable.value.splice(evt.newIndex || 0, 0, changeData[0]);
      console.log(newFormTable.value);
      console.log(sortable.toArray());
      sortableSort.value = sortable.toArray();
    },
  });
  const { data, type } = attrs;
  console.log(data);
  taskType.value = type;
  if (data && data.length) {
    data.sort((a, b) => a.taskNum - b.taskNum);
    list.value = data;
    list.value.forEach((item, index) => {
      sortableSort.value.push(index);
    });
  }
});
defineExpose({ submitForm, newFormTable, list, sortableSort });
</script>
<style lang="scss" scoped>
.baseinfo {
  width: 100%;
  margin: 0 auto;
}
#itxst {
  margin: 10px auto;
  width: 80%;
}

#itxst .itxstDiv {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  cursor: move;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  // height: 120px;
}
.left {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .el-icon {
    display: inline-block;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 5px;
  }
}

.right {
  margin-left: 40px;
}
.noMarginBottom {
  margin-bottom: 0;
}
</style>
